import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'

interface Report {
  id: number
  title: string
  status: 'issued' | 'pending'
  reportTime: string
}

function OutpatientReport() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState<'examination' | 'test'>('examination')
  
  const examinationReports: Report[] = [
    {
      id: 1,
      title: '双肾及肾血管彩色多普勒',
      status: 'issued',
      reportTime: '2020-01-01 10:20:36'
    },
    {
      id: 2,
      title: '上腹部CT平扫',
      status: 'issued',
      reportTime: '2020-01-01 10:20:36'
    },
    {
      id: 3,
      title: '核磁共振',
      status: 'pending',
      reportTime: '--'
    }
  ]
  
  const testReports: Report[] = [
    {
      id: 4,
      title: '血常规检查',
      status: 'issued',
      reportTime: '2020-01-01 09:15:20'
    },
    {
      id: 5,
      title: '肝功能检查',
      status: 'pending',
      reportTime: '--'
    }
  ]

  const currentReports = activeTab === 'examination' ? examinationReports : testReports

  return (
    <div style={{
      minHeight: '100vh',
      background: '#f5f5f5',
      paddingTop: 'env(safe-area-inset-top)',
      paddingBottom: 'env(safe-area-inset-bottom)'
    }}>
      {/* 头部 */}
      <div style={{
        background: 'white',
        padding: '16px',
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        <button 
          onClick={() => navigate(-1)} 
          title="返回"
          style={{
            background: 'none',
            border: 'none',
            fontSize: '20px',
            color: '#333',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}
        >←</button>
        <h1 style={{
          margin: 0,
          fontSize: '18px',
          fontWeight: '600',
          color: '#333'
        }}>门诊报告</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span style={{
            fontSize: '20px',
            color: '#666',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}>⋯</span>
          <span style={{
            fontSize: '20px',
            color: '#666',
            cursor: 'pointer',
            padding: '4px',
            borderRadius: '50%',
            transition: 'background-color 0.2s ease'
          }}>◎</span>
        </div>
      </div>

      {/* 患者信息卡片 */}
      <div style={{
        background: 'white',
        margin: '16px',
        borderRadius: '12px',
        padding: '16px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '12px'
          }}>
            <span style={{
              fontSize: '16px',
              fontWeight: '600',
              color: '#333'
            }}>王小柯</span>
            <span style={{
              fontSize: '14px',
              color: '#666'
            }}>2015****10</span>
          </div>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            cursor: 'pointer',
            padding: '8px',
            borderRadius: '6px',
            transition: 'background-color 0.2s ease'
          }}>
            <span style={{ fontSize: '16px' }}>👤</span>
            <span style={{
              fontSize: '14px',
              color: '#1677ff'
            }}>切换</span>
          </div>
        </div>
      </div>

      {/* 报告类型标签页 */}
      <div style={{
        background: 'white',
        margin: '0 16px 16px 16px',
        borderRadius: '12px',
        padding: '4px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
      }}>
        <div style={{
          display: 'flex',
          background: '#f5f5f5',
          borderRadius: '8px',
          padding: '4px'
        }}>
          <button
            onClick={() => setActiveTab('examination')}
            style={{
              flex: 1,
              padding: '12px',
              border: 'none',
              borderRadius: '6px',
              background: activeTab === 'examination' ? 'white' : 'transparent',
              color: activeTab === 'examination' ? '#1677ff' : '#666',
              fontWeight: activeTab === 'examination' ? '600' : '400',
              cursor: 'pointer',
              transition: 'all 0.2s ease',
              boxShadow: activeTab === 'examination' ? '0 2px 4px rgba(0,0,0,0.1)' : 'none'
            }}
          >
            检查
          </button>
          <button
            onClick={() => setActiveTab('test')}
            style={{
              flex: 1,
              padding: '12px',
              border: 'none',
              borderRadius: '6px',
              background: activeTab === 'test' ? 'white' : 'transparent',
              color: activeTab === 'test' ? '#1677ff' : '#666',
              fontWeight: activeTab === 'test' ? '600' : '400',
              cursor: 'pointer',
              transition: 'all 0.2s ease',
              boxShadow: activeTab === 'test' ? '0 2px 4px rgba(0,0,0,0.1)' : 'none'
            }}
          >
            检验
          </button>
        </div>
      </div>

      {/* 报告列表 */}
      <div style={{
        margin: '0 16px'
      }}>
                 {currentReports.map((report) => (
           <div
             key={report.id}
             style={{
               background: 'white',
               marginBottom: '12px',
               borderRadius: '12px',
               padding: '16px',
               boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
               borderLeft: '4px solid #1677ff',
               cursor: 'pointer',
               transition: 'transform 0.2s ease, box-shadow 0.2s ease'
             }}
             onClick={() => {
               if (report.status === 'issued') {
                 if (activeTab === 'examination') {
                   navigate(`/examination-report-detail/${report.id}`)
                 } else {
                   navigate(`/test-report-detail/${report.id}`)
                 }
               }
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.transform = 'translateY(-2px)'
               e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)'
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.transform = 'translateY(0)'
               e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.06)'
             }}
           >
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'flex-start',
              marginBottom: '8px'
            }}>
              <h3 style={{
                margin: 0,
                fontSize: '16px',
                fontWeight: '600',
                color: '#333',
                lineHeight: '1.4',
                flex: 1
              }}>
                {report.title}
              </h3>
              <span style={{
                fontSize: '14px',
                fontWeight: '500',
                color: report.status === 'issued' ? '#1677ff' : '#ff4d4f',
                padding: '4px 8px',
                borderRadius: '4px',
                background: report.status === 'issued' ? '#e6f7ff' : '#fff2f0'
              }}>
                {report.status === 'issued' ? '报告已出' : '报告未出'}
              </span>
            </div>
            <div style={{
              fontSize: '14px',
              color: '#999'
            }}>
              报告时间: {report.reportTime}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default OutpatientReport
